<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">咨询人列表</block>
		</custom-nav-sq-xcx>
		<view class="sqConBlock"></view>
		<view class="sqConWrap noPadd">
			<block v-if="isHasDataFlag">
				<view class="zxrList">
					<view class="listItem spaceBet"
						v-for="(item,index) in zxrList"
						:key="index"
						@tap="goZxrInfo(item.id)"
					>
						<view class="left">
							<image class="defImg" :src="defHead"></image>
							<view class="usename">{{item.zxrName}}</view>
							<view>{{item.zxrMobile}}</view>
						</view>
						<view class="right" @tap.stop="delZxr(item.id)">
							<view class="iconfont icon-shanchu"></view>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="isHasDataFlag == false">
				<no-data-sq></no-data-sq>
			</block>
			<view class="addZxrInfo" @tap="addZxr">
				<text class="iconfont icon-jia"></text>
				<text>添加咨询人<text class="smTxt">(最多添加10个)</text></text>
			</view>
			<common-alert :showAlertFlag="showAlertFlag" :alertWidth="alertWidth">
				<view class="alertContent">确认要删除该咨询人吗</view>
				<view class="tui-alert-btn" :hover-stay-time="150">
					<view class="cancelBtn sq" @tap.stop="cancelDel">取消</view>
					<button class="sureBtn sq" @tap="sureFun" :disabled="isDisableFlag">确认</button>
				</view>
			</common-alert>
		</view>
	</view>
</template>

<script>
	//import { getZxUserList,delZxr } from '@/api/xlzx/index'
	import NoDataSq from '@/components/no-data-sq/index.vue'
	export default {
		components:{
			NoDataSq
		},
		data(){
			return{
				showAlertFlag:false,
				alertWidth:600,
				zxrList:[],
				isRefreshFlag:false,
				zxrId:'',
				isHasDataFlag:null,
				defHead:this.defHead,
				isDisableFlag:false
			} 
		},
		onLoad(){
			//this.getZxUserList();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.getZxUserList();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		methods:{
			getZxUserList(){
				getZxUserList().then(res=>{
					this.isHasDataFlag = true;
					this.zxrList = res.data.datas;
				}).catch(err=>{
					if(err.data.code == 50001){
						this.zxrList = [];
						this.isHasDataFlag = false;
					}
				});
			},
			addZxr(){
				if(this.zxrList.length >=10){
					this.util.showToast('最多可添加10个咨询人');
					return;
				}
				uni.navigateTo({
					url:'./addZxrInfo'
				})
			},
			delZxr(id){
				this.zxrId = id;
				this.showAlertFlag = true;
			},
			goZxrInfo(id){
				uni.navigateTo({
					url:'./zxrInfo?id=' + id
				})
			},
			sureFun(){
				var field = { id:this.zxrId };
				uni.showLoading({ title: '删除中...', mask: true }); 
				this.isDisableFlag = true;
				delZxr(field).then(res=>{
					this.isDisableFlag = false;
					this.util.showToastSuc('删除成功');
					setTimeout(()=>{
						this.showAlertFlag = false;
						this.getZxUserList();
					},1500)
				}).catch(err=>{
					this.isDisableFlag = false;
					console.log(err)
				});
			},
			cancelDel(){
				this.showAlertFlag = false;
			}
		}
	}
</script>

<style lang='scss'>
	@import url("/static/css/common/alert.css");
	page{
		background: $sq-fuf;
	}
	.addZxrInfo{
		width: 690rpx;
		height: 90rpx;
		background: $pss-sq-main;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		bottom: 50rpx;
		border-radius: 50rpx;
		.icon-jia{
			font-size: 38rpx;
			margin-right: 10rpx;
		}
		.smTxt{
			font-size: 24rpx;
		}
	}
	.zxrList{
		padding: 20rpx 30rpx 0;
		.listItem{
			border-radius: 10rpx;
			background: #fff;
			padding: 20rpx;
			align-items: center;
			margin-bottom: 20rpx;
			.left{
				display: flex;
				align-items: center;
				font-size:30rpx;
				color: $sq-main0;
				.defImg{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.usename{
					margin-right: 15rpx;
				}
			}
			.right{
				height: 80rpx;
				padding-left: 80rpx;
				line-height: 80rpx;
				.icon-shanchu{
					font-size:36rpx;
					color: $pss-sq-red;
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>